<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react生命周期</title>
    <style>
        .title{color:red}
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>


    <!-- 引入react核心库 -->
    <script src="../js/16/react.development.js" ></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script src="../js/16/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="../js/babel.js" ></script>
    <script type="text/babel"> /*此处一定要写babel，否则无法识别jsx语法*/
        // 创建组件
        class Count extends React.Component{
            // 构造器
            constructor (props) {
                console.log('count---constructor', props)
                super(props)
                // 初始化状态
                this.state = { count: 0 }
            }
            // 加1按钮回调
            add = () => {
                const { count } = this.state
                // 修改状态
                this.setState({ count: count + 1})
            }
            // 卸载组件按钮的回调
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新按钮的回调
            force = () => {
                this.forceUpdate()
            }
            // 组件将要挂载
            componentWillMount () {
                console.log('count---componentWillMount')
            }
            // 组件已经挂载
            componentDidMount () {
                console.log('count---componentDidMount')
            }
            // 组件将要卸载的钩子
            componentWillUnmount () {
                console.log('count---componentWillUnMount')
            }
            // 控制组件更新的钩子
            shouldComponentUpdate () {
                console.log('count---shouldComponentUpdate')
                return true
                // return false // 组件不在更新，render也不再调用

            }
            // 组件将要更新的钩子
            componentWillUpdate () {
                console.log('count---componentWillUpdate')
            }
            // 组件完成更新的钩子
            componentDidUpdate () {
                console.log('count---componentDidUpdate')
            }
            render () {
                console.log('count---render')
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为: {count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改状态中的数据，强制更新</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
</body>
</html>